const path = require('path');
//启用热更新的第二步
const webpack = require('webpack');
//导入在内存中生成html的插件
//只要是插件 都一定要放到plugins节点中去
<!--这个插件有两个作用-->
//1. 自动在内存中根据指定的页面生成一个内存的页面
//2. 自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin');

//这个配置文件 其实就是一个js文件 通过node中的模块操作 向外暴露了一个配置对象
module.exports = {
    mode:'development',
// 配置文件中需要手动指定入口和出口
    entry: path.join(__dirname, './src/main.js'), //表示要使用webpack打包哪个文件
    output: {       //这是输出文件相关的配置
        path:path.join(__dirname,'./dist'),     //指定打包好的文件 输出到哪个目录中去
        filename: "bundle.js"  //指定输出文件的名称
    },
    devServer: {        //这是配置dev命令参数的第二种形式 相对来说 麻烦一点
        open:true,  //自动打开浏览器
        port:5000, //设置启动时候的运行端口
        // contentBase: 'src', //指定托管的根目录
        hot:true,  //启用热更新的第一步
        // host:'192.168.1.5'     //设置访问地址 可用于手机测试
    },
    plugins:[       //配置插件的节点
        new webpack.HotModuleReplacementPlugin(),    //启用一个热更新的模块对象 热更新的第3步
        new htmlWebpackPlugin({     //创建一个在内存中生成html页面的插件
            template:path.join(__dirname,'./src/index.html'),  //指定模板页面 将来会根据指定的页面路径 去生成内存中的页面
            filename:'index.html',       //指定生成的页面名称
        })
    ],
    module:{        //这个节点用于配置所有的第三方模块加载器
        rules:[     //这是所有第三方模块的匹配规则
            { test: /\.css$/ ,use:['style-loader','css-loader'] },  //配置处理.css文件的第三方loader规则
            { test: /\.less$/ ,use:['style-loader','css-loader','less-loader'] }, //这是配置处理.less文件的第三方loader规则
            { test: /\.scss$/ ,use:['style-loader','css-loader','sass-loader'] }, //这是配置处理.scss文件的第三方loader规则
            { test: /\.(jpg|png|gif|bmp|jpeg)$/ ,use:'url-loader?limit=32000&name=[hash:8]-[name].[ext]' }, //这是配置处理图片路径的第三方loader规则
        //    limit给定的值是图片的大小 单位是byte 如果引用的图片 大于或等于给定的limit值 则不会被转为base64字符串 如果图片小于limit值 则会转为base64字符串
            { test: /\.(ttf|svg|eot|woff|woff2)$/ ,use:'url-loader' },      //这是配置处理文字库的第三方loader规则
            { test: /\.js$/ ,use:'babel-loader',exclude:/node_modules/},     //这是配置babel 来转换高级es语法
            {test:/\.vue$/,use:'vue-loader'}    //这是处理.vue文件的loader
        ]
    },
    resolve: {
        alias:{
            // 'vue$':'vue/dist/vue.js'    //修改vue被导入时候包的路径
        }
    },
};

//当我们在控制台输入webpack 执行命令的时候 webpack做了以下几步
//1. 首先 webpack发现 我们并没有通过命令的形式 给他指定入口和出口
//2. webpack就会去项目根目录中 查找一个叫做webpack.config.js的配置文件
//3. 当找到配置文件后 webpack会解析执行这个配置文件 当解析执行完配置文件后 就得到了配置文件中导出的配置对象
//4. 当webpack得到配置对象后 就拿到了配置对象中 指定的入口和出口 然后进行打包构建
